<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript"> 
$(document).ready(function(){
var $image = $('#my_img');
	// Testing
    function animate_img() {
     
        if ($('#my_img').css('top') != '0px') {
           $('#my_img').animate({top: '-200px'}, 5000, function () {alert("fgh");
		 
              
            });
        }
else
{
alert("else");
} 
    }
    animate_img();

			

var counter=0;
var counter1=0;
var counter2=0;



 $('.main_ul li #sp1').show();
    $('.main_ul_768 li #sp4').show();
  $(window).scroll(function()
  { 

    var scrollTop = $(window).scrollTop();
	
   if (scrollTop >= 600)
   {
  counter++;
  
  if(counter==1)
  {

  

setTimeout(function()
  {  
  
$(".main_ul>li").eq(1).css("border","2px solid #5d5d5d").css("background","#4c4c4c");
$(".main_ul_768>li").eq(1).css("border","2px solid #5d5d5d").css("background","#4c4c4c");
$('.main_ul li #sp2').show();
$('.main_ul_768 li #sp5').show();
},2000);
setTimeout(function()
  { 
 
$('.main_ul li #sp3').show(); 
$('.main_ul_768 li #sp6').show(); 
$(".main_ul>li").eq(2).css("border","2px solid #5d5d5d").css("background","#4c4c4c");
$(".main_ul_768>li").eq(2).css("border","2px solid #5d5d5d").css("background","#4c4c4c");

},3000);
}
}
  
    });//window.scroll
	
	

    

});//ready function

</script>



<style type="text/css">
.gallery { width:435px; height:270px; margin:0 auto; }

#slider { margin:25px 0 0 0; padding:0; list-style:none; }


#slider ul,
#slider li { margin:0; padding:0; list-style:none; }


/* 
    define width and height of list item (slide)
    entire slider area will adjust according to the parameters provided here
*/
#slider li { width:387px; height:245px; overflow:hidden; }



p#controls { margin:0; padding:0; position:relative; }


#prevBtn { display:block; margin:0; overflow:hidden; width:25px; height:48px; position:absolute; left:-41px; top:-160px; }


#nextBtn { display:none; margin:0; overflow:hidden; width:25px; height:48px; position:absolute; left: 906px; top:-160px; }

#prevBtn a { display:none; width:25px; height:48px; background:url(images/l_arrow.gif) no-repeat 0 0; }



#nextBtn a { display:none; width:25px; height:48px; background:url(images/r_arrow.gif) no-repeat 0 0; }






</style>





</head>

<body>
<div class="wraper">
<div class="inner_footer1_768">
<input type="text" name="text" class="footer_txt" placeholder="email"/>
<input type="button" name="button" class="footer_btn" value="Notify me when it’s ready"/>
</div>


</div>
<div class="wrapper3">
<div class="inner_footer_768">
<input type="text" name="text" class="footer_txt" placeholder="email"/>
<input type="button" name="button" class="footer_btn" value="Notify me when it’s ready"/>
</div>
</div>
<div class="wraper4">
<div class="inner_contaner1">

<p class="mar">Zinio for Nokia Windows 8 phones is almost ready. The world’s largest selection of premium digital magazines from news, science, technology, fashion, entertainment and more is coming to Windows 8 phones.</p>
<p  class="mar">You will be able to browse thousands of magazines in the Zinio store, read your magazines intuitively online, offline, and across devices, or explore Zinio’s daily stream of articles from popular titles.</p>


<div class="dropdown_wrapper">
<img src="images/dropdown_top.png" class="dropdown_top"/>
<h1>SELECT YOUR INTERESTS<img src="images/dropdown_symbol.png" class="drop_1"/></h1>

<div class="nav2">

<a class="active" href="#" id="selectinterst">SELECT YOUR INTERESTS</a>
<a href="#" id="reading1">READING LIST</a>
<a href="#" id="reader2">READER</a>
<a href="#" id="newsstand1_3">NEWSSTAND</a>
<a href="#" id="libraray4">LIBRARY</a>
<a href="#" id="pin5">PIN</a>
<a href="#" id="wifi6">WIFI AUTODOWNLOAD</a>



</div>
</div>


<div class="intrest_imag_768">
<div class="intrest_imag_inner">
<ul class="main_ul_768">
<li><img src="images/art.jpg" /><span id="sp4"><img src="images/tick1.jpg" class="tick" /></span></li>
<ul class="sub_ul_768">
<li>Automotive</li>
<li>Entertainement</li>
</ul>
</ul>
<ul class="main_ul_768">
<li><img src="images/home.jpg" /><span id="sp5"><img src="images/tick1.jpg" class="tick" /></span></li>
<ul class="sub_ul_768">
<li>Automotive</li>
<li>Entertainement</li>
</ul>
</ul>
<ul class="main_ul_768">
<li><img src="images/lifestyle.jpg" /><span id="sp6"><img src="images/tick1.jpg" class="tick" /></span></li>
<ul class="sub_ul_768">
<li>Automotive</li>
<li>Entertainement</li>
</ul>
</ul>

</div>
</div>

<!--<img src="images/select_your_768.png" class="select768"/>-->
</div>




</div>

<div class="wrapper5">
<div class="inner_wrapper5">
<h2>TELL US WHAT YOU LIKE</h2>
<p>Tell us what about your reading habits – we’ll help find articles from magazines you might like to read.</p>
</div></div>

<div class="wraper4" id="reading_list1">
<div class="inner_contaner1">
<div style=" width:350px; margin:0 auto;"><marquee behavior="slide" direction="up" height="300px" id="mymarquee_768" speedamount="40">
<img src="images/reading_list.jpg"  />
</marquee></div>
</div></div>

<div class="wrapper5">
<div class="inner_wrapper5">
<h2>BUILD YOUR READING LIST</h2>
<p>Your Reading List has all your latest magazines, along with free articles recommended by our editors.</p>
</div></div>


<div class="wraper4" id="read_articles1">
<div class="inner_contaner1">

<div class="right_imag_768">
<img src="images/page1.jpg" id="slide_imag" />
</div>

<!--<img src="images/read1_articles_768.png" class="readarticle768"/>-->
<img src="images/read2_areticle_768.png" class="read_article768"/>
</div></div>


<div class="wrapper5">
<div class="inner_wrapper5">
<h3>READ ARTICLES & FULL ISSUES</h3>
<p>Read articles or magazines online & offline, and in full-color newsstand form, or quick text for easy-reading.</p>
</div></div>


<div class="wraper4" id="newsstand2_list">
<div class="inner_contaner1">
<img src="images/newsstand_768.png" class="newsstand1"/>
<img src="images/newssatnd1.png" class="newsstand2"/>
    <img src="images/newsstand2_768.png" class="newsstand3"/>
    <div class="middle_news">
    <h2>BROWSE OUR NEWSSTAND</h2>
<p class="clear">Browse Zinio’s newsstand, and find single issues and subscriptions to great magazines.</p>
</div>
<img src="images/newsstand3_768.png" class="newsstand2"/>
    <img src="images/newsstand4_768.png" class="newsstand3"/>
    <img src="images/newssatnd5_768.png" class="newsstand4"/>
      <img src="images/newsstand6_768.png" class="newsstand5"/>
</div></div>


<div class="wraper4" id="library1">
<div class="inner_contaner1">
<img src="images/library_768.png" class="select768"/>
</div></div>


<div class="wrapper5">
<div class="inner_wrapper5">
<h3>ACCESS YOUR LIBRARY</h3>
<p>Read new issues as they hit the newsstand, and archive back issues in your library.</p>
</div></div>

<div class="wraper4" id="pinstart_menu1">
<div class="inner_contaner1">
<img src="images/pin_start_menu.png" class="pin_768"/>
</div></div>

<div class="wrapper5">
<div class="inner_wrapper5">
<h3>PIN TO YOUR START MENU</h3>
<p>Pin live tiles to your desktop, including your library, single issues, articles, and bookmarks</p>
</div></div>

<div class="wraper4" id="wifi1">
<div class="inner_contaner1">
<img src="images/wifi.png" class="pin_768"/>
</div></div>

<div class="wrapper5">
<div class="inner_wrapper5">
<h3>WIFI AUTODOWNLOAD</h3>
<p>Set your library to background download, and keep your Reading List available offline.</p>
</div></div>

<div class="footer_768">
<img src="images/footer_768.png" class="footer_theme"/>

<div class="inner_contaner2">
<div class="inner_footer_768">
<input type="text" name="text" class="footer_txt" placeholder="email"/>
<input type="button" name="button" class="footer_btn" value="Notify me when it’s ready"/>
</div>
</div>
</div>





<div class="wraper1" id="nav_fix">
<div class="inner_contaner">
<div class="nav">

<a class="active" href="#" id="selectinterst">SELECT YOUR INTERESTS</a>
<a href="#" id="reading">READING LIST</a>
<a href="#" id="reader">READER</a>
<a href="#" id="newsstand1">NEWSSTAND</a>
<a href="#" id="libraray">LIBRARY</a>
<a href="#" id="pin">PIN</a>
<a href="#" id="wifi_nav">WIFI AUTODOWNLOAD</a></div>
</div>
</div>


<div class="wraper2 borde">
<div class="inner_contaner">

<p class="mar">Zinio for Nokia Windows 8 phones has arrived, with the world’s largest selection of premium digital magazines from news, science, technology, fashion, entertainment and more.</p>
<p  class="mar">Browse thousands of magazines in the Zinio store, read your magazines intuitively online, offline, and across devices, or explore Zinio’s daily stream of articles from popular titles.</p>
<p  class="mar">Find Zinio today in the Windows Store.</p>
</div>

</div>
<div class="wraper1" id="whatyoulike">
<div class="inner_contaner">

<div class="intrest_imag">
<ul class="main_ul">
<li>Art<span id="sp1"><img src="images/tick.jpg" class="tick" /></span></li>
<ul class="sub_ul">
<li>Automotive</li>
<li>Entertainement</li>
</ul>
</ul>
<ul class="main_ul">
<li>Home<span id="sp2"><img src="images/tick.jpg" class="tick" /></span></li>
<ul class="sub_ul">
<li>Automotive</li>
<li>Entertainement</li>
</ul>
</ul>
<ul class="main_ul">
<li>Lifestyle<span id="sp3"><img src="images/tick.jpg" class="tick" /></span></li>
<ul class="sub_ul">
<li>Automotive</li>
<li>Entertainement</li>
</ul>
</ul>
<ul class="main_ul">
<li>Men</li>
<ul class="sub_ul">
<li>Automotive</li>
<li>Entertainement</li>
</ul>

</ul>
</div>
<h2>TELL US WHAT YOU LIKE</h2>
<p class="centr">Tell us what about your reading habits – <br />
we’ll help find articles from magazines <br />
you might like to read.</p>

</div></div>

<div class="wraper2"  id="reading_list">
<div class="inner_contaner">


	

<div  id="animate1_top1">

<img src="images/reading_list.png" id="my_img" />
</div>

<h2>BUILD YOUR READING LIST</h2> 
<p class="centr">Your Reading List has all your latest <br />
magazines, along with free articles<br />
 recommended by our editors</p>

</div></div>
<div class="wraper1" id="readarticles">
<div class="inner_contaner"><img src="images/Read_articles1.png" width="165" height="292" class="left" />
<div class="right_imag">

<div class="gallery">
      <div id="slider">
        <ul>
          <li>
           <img src="images/page1.jpg" alt="screen 1"  border="0" class="screen"  />
              
       
          </li>
          <li>
            <img src="images/page2.jpg" alt="screen 1" border="0" class="screen"  />
              
        
          </li>
          <li>
           <img src="images/page3.jpg" alt="screen 1"  border="0" class="screen"  />
              
          
          </li>
          <li>
           <img src="images/page1.jpg" alt="screen 1"  border="0" class="screen"  />
              
       
          </li>
        </ul>
      </div>
    </div>
</div>

<div class="centr_read">
<h2>READ ARTICLES & FULL ISSUES</h2>
<p class="clear">Read articles or magazines online & offline,<br/> and in full-color newsstand form, or quick text <br/>for easy-reading.</p>
</div>
</div>
</div>

<div class="wraper2" id="newsstand">
<div class="inner_contaner">
<div class="img_wrapper">
<img src="images/newssatnd1.png"  class="newsstand1"/>
<img src="images/newsstand2.png" class="top_img"/>
<img src="images/newsstand3.png" class="right"/>
</div>
<div class="newsstand_auto">
<h2>BROWSE OUR NEWSSTAND</h2> 
<p class="clear">Browse Zinio’s newsstand, and find single issues and subscriptions to great magazines.</p>
</div>
<div class="img_wrapper">
<img src="images/newsstand4.png"  class="newsstand1"/>
<img src="images/newsstand5.png" class="top_img"/>
<img src="images/newsstand6.png" class="top_img"/>
<img src="images/newsstand7.png" class="right"/>
</div>


</div></div>

<div class="wraper1" id="accesslibraray">
<div class="inner_contaner"><img src="images/library.png" />
<div class="library">
<h2>ACCESS YOUR LIBRARY</h2>
<p>Read new issues as they hit the newsstand, and archive back issues in your Library.</p>
</div>
</div>
</div>

<div class="wraper2" id="pinstart">
<div class="inner_contaner"><img src="images/pin_start_menu.png" class="right" />
<div class="library pin_menu">
<h3>PIN TO YOUR START MENU</h3>
<p>Pin live tiles to your desktop, including your library, single issues, articles, and bookmarks.</p>
</div>
</div>
</div>


<div class="wraper1" id="wifi">
<div class="inner_contaner"><img src="images/wifi.png" width="165" height="292" class="left" />
<div class="library">
<h2>WIFI AUTODOWNLOAD</h2>
<p>Set your library to background download, and keep your Reading List available offline.</p>
</div>
</div>
</div>

<div class="select_ur_footer">
<div class="right_sec">
<img src="images/back_totop.png" class="back_totop"/><p>BACK TO TOP</p>
</div>
<div class="inner_contaner">

<input type="text" name="text" class="footer_txt" placeholder="email"/>
<input type="button" name="button" class="footer_btn" value="Notify me when it’s ready"/>
</div>
</div>

</section>
<script type="text/javascript">
$(document).ready(function(){

	counter3=0;
 counter4=0;
 easy=0;
 $(window).scroll(function(){
  var scrollTop = $(window).scrollTop();	
	
   if (scrollTop >= 1100)
   {
 easy++;
 if(easy==1)
 {
 $("#slider").easySlider({
		controlsBefore:	'<p id="controls">',
		controlsAfter:	'</p>',
		auto: true, 
		speed:500,
		pause:1000,
		continuous: false
	});	
	}
	}
	if(scrollTop>=600)
	{
	
	}
	if(scrollTop>=900)


{
counter3++;
if(counter3==1)
{
console.log("529");
var marq='<marquee behavior="slide" direction="up" height="350px"  id="mymarquee" >';
 marq+='<img src="images/reading_list.png"  class="mymarq"/>';
 marq+='</marquee>';
 $('#animate1_top1').append(marq);
 console.log("534");
  $('#my_img').fadeOut("fast");
console.log("536");
//document.getElementById("mymarquee").stop();


}

}

if(scrollTop>=950)


{
counter4++;
if(counter4==1)
{
//document.getElementById("mymarquee_768").stop();


}

}

	
	
	
	});
	
	

});
</script>

<script type="text/javascript" src="js/easySlider1.5.js"></script>


<script src="js/application.js" type="text/javascript"></script>

 
</body>
</html>
